<template>
  <view class="profile-container">
    <!-- 顶部背景和头像 -->
    <view class="profile-header">
      <image class="header-bg"
        src="https://img1.baidu.com/it/u=2466701019,3138583453&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1733"
        mode="aspectFill"></image>
      <view class="avatar-container">
        <image class="avatar" :src="userinfo.avatarUrl" mode="aspectFill"></image>
        <view class="avatar-edit" @click="changeAvatar">
          <uni-icons type="camera" size="20" color="#fff"></uni-icons>
        </view>
      </view>
    </view>

    <!-- 基本信息卡片 -->
    <view class="profile-card">
      <view class="card-header">
        <text class="username">{{userinfo.nickName}}</text>
        <view class="level-badge">
          <text>Lv.{{userInfo.level}}</text>
          <uni-icons type="star-filled" size="14" color="#FFC107"></uni-icons>
        </view>
      </view>

      <view class="stats-row">
        <view class="stat-item" @click="navigateTo('follower')">
          <text class="stat-value">{{userInfo.followers}}</text>
          <text class="stat-label">粉丝</text>
        </view>
        <view class="stat-item" @click="navigateTo('following')">
          <text class="stat-value">{{userInfo.following}}</text>
          <text class="stat-label">关注</text>
        </view>
        <view class="stat-item" @click="navigateTo('achievement')">
          <text class="stat-value">{{userInfo.booksRead}}</text>
          <text class="stat-label">已读</text>
        </view>
      </view>

      <view class="bio">
        <text>{{userInfo.bio || '这个人很懒，还没有写个人简介~'}}</text>
        <uni-icons type="compose" size="16" color="#666" @click="editBio"></uni-icons>
      </view>
    </view>

    <!-- 个人信息表单 -->
    <view class="info-form">
      <view class="form-item" @click="editField('name')">
        <text class="label">姓名</text>
        <view class="value">
          <text>{{userInfo.name || '未设置'}}</text>
          <uni-icons type="forward" size="16" color="#999"></uni-icons>
        </view>
      </view>
      <view class="form-item" @click="editField('gender')">
        <text class="label">性别</text>
        <view class="value">
          <text>{{genderMap[userInfo.gender] || '未设置'}}</text>
          <uni-icons type="forward" size="16" color="#999"></uni-icons>
        </view>
      </view>
      <view class="form-item" @click="editField('birthday')">
        <text class="label">生日</text>
        <view class="value">
          <text>{{userInfo.birthday || '未设置'}}</text>
          <uni-icons type="forward" size="16" color="#999"></uni-icons>
        </view>
      </view>
      <view class="form-item" @click="editField('location')">
        <text class="label">地区</text>
        <view class="value">
          <text>{{userInfo.location || '未设置'}}</text>
          <uni-icons type="forward" size="16" color="#999"></uni-icons>
        </view>
      </view>
    </view>

    <!-- 账号设置 -->
    <view class="settings-section">
      <view class="section-title">账号设置</view>
      <view class="setting-item" @click="navigateTo('account')">
        <uni-icons type="contact" size="18" color="#666"></uni-icons>
        <text>账号与安全</text>
        <uni-icons type="forward" size="16" color="#999"></uni-icons>
      </view>
      <view class="setting-item" @click="navigateTo('privacy')">
        <uni-icons type="locked" size="18" color="#666"></uni-icons>
        <text>隐私设置</text>
        <uni-icons type="forward" size="16" color="#999"></uni-icons>
      </view>
      <view class="setting-item" @click="navigateTo('notification')">
        <uni-icons type="notification" size="18" color="#666"></uni-icons>
        <text>通知设置</text>
        <uni-icons type="forward" size="16" color="#999"></uni-icons>
      </view>
    </view>
    <!-- 退出登录按钮 -->
    <view class="logout-btn" @click="logout">
      <text>退出登录</text>
    </view>

    <!-- 编辑弹窗 -->
    <uni-popup ref="editPopup" type="bottom">
      <view class="edit-popup">
        <view class="popup-header">
          <text class="title">编辑{{editFieldLabel}}</text>
          <text class="cancel" @click="cancelEdit">取消</text>
        </view>
        <view class="popup-content">
          <template v-if="editingField === 'bio'">
            <textarea v-model="tempValue" placeholder="请输入个人简介" maxlength="100"></textarea>
            <text class="word-count">{{tempValue.length}}/100</text>
          </template>
          <template v-else-if="editingField === 'gender'">
            <radio-group @change="genderChange">
              <label class="radio-item" v-for="(label, value) in genderMap" :key="value">
                <radio :value="value" :checked="tempValue === value" color="#2A5CAA"></radio>
                <text>{{label}}</text>
              </label>
            </radio-group>
          </template>
          <template v-else-if="editingField === 'birthday'">
            <picker mode="date" :value="tempValue" @change="dateChange">
              <view class="picker">
                <text>{{tempValue || '请选择生日'}}</text>
              </view>
            </picker>
          </template>
          <template v-else>
            <input v-model="tempValue" :placeholder="'请输入'+editFieldLabel" />
          </template>
        </view>
        <button class="confirm-btn" @click="saveEdit">保存</button>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  export default {
    computed: {
      ...mapState('m_user', ['userinfo'])
    },
    data() {
      return {
        userInfo: {
          level: 1,
          followers: 128,
          following: 56,
          booksRead: 42,
          bio: '热爱阅读，分享知识，共同成长',
          name: 'xxx',
          gender: 'male',
          birthday: '1990-05-15',
          location: '北京'
        },
        genderMap: {
          male: '男',
          female: '女'
        },
        cacheSize: '15.6MB',
        editingField: '',
        editFieldLabel: '',
        tempValue: ''
      }
    },
    methods: {
      changeAvatar() {
        uni.chooseImage({
          count: 1,
          sizeType: ['compressed'],
          sourceType: ['album'],
          success: (res) => {
            const tempFilePaths = res.tempFilePaths
            // 这里应该上传图片到服务器
            this.userInfo.avatar = tempFilePaths[0]
            uni.showToast({
              title: '头像上传成功',
              icon: 'success'
            })
          }
        })
      },
      editBio() {
        this.editingField = 'bio'
        this.editFieldLabel = '个人简介'
        this.tempValue = this.userInfo.bio
        this.$refs.editPopup.open()
      },
      editField(field) {
        this.editingField = field
        switch (field) {
          case 'name':
            this.editFieldLabel = '姓名';
            break
          case 'gender':
            this.editFieldLabel = '性别';
            break
          case 'birthday':
            this.editFieldLabel = '生日';
            break
          case 'location':
            this.editFieldLabel = '地区';
            break
        }
        this.tempValue = this.userInfo[field]
        this.$refs.editPopup.open()
      },
      genderChange(e) {
        this.tempValue = e.detail.value
      },
      dateChange(e) {
        this.tempValue = e.detail.value
      },
      saveEdit() {
        if (this.editingField === 'bio' || this.editingField === 'name' || this.editingField === 'location') {
          if (!this.tempValue.trim()) {
            uni.showToast({
              title: '内容不能为空',
              icon: 'none'
            })
            return
          }
        }

        this.userInfo[this.editingField] = this.tempValue
        this.$refs.editPopup.close()

        // 这里应该调用API保存到服务器
        uni.showToast({
          title: '修改成功',
          icon: 'success'
        })
      },
      cancelEdit() {
        this.$refs.editPopup.close()
      },
      navigateTo(page) {
        const routes = {
          'follower': '/pages/follower/follower',
          'following': '/pages/following/following',
          'achievement': '/pages/achievement/achievement',
          'account': '/pages/account/account',
          'privacy': '/pages/privacy/privacy',
          'notification': '/pages/notification/notification'
        }
        uni.navigateTo({
          url: routes[page]
        })
      },
      clearCache() {
        uni.showModal({
          title: '清除缓存',
          content: '确定要清除所有缓存数据吗？',
          success: (res) => {
            if (res.confirm) {
              // 模拟清除缓存
              this.cacheSize = '0MB'
              uni.showToast({
                title: '缓存已清除',
                icon: 'success'
              })
            }
          }
        })
      },
      giveFeedback() {
        uni.navigateTo({
          url: '/pages/feedback/feedback'
        })
      },
      aboutApp() {
        uni.navigateTo({
          url: '/pages/about/about'
        })
      },
      logout() {
        uni.showModal({
          title: '退出登录',
          content: '确定要退出当前账号吗？',
          success: (res) => {
            if (res.confirm) {
              // 这里应该调用API注销登录状态
              uni.reLaunch({
                url: '/pages/login/login'
              })
            }
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  .profile-container {
    background-color: #f5f5f5;
    min-height: 100vh;
    padding-bottom: 30px;
  }

  .profile-header {
    position: relative;
    height: 200px;

    .header-bg {
      width: 100%;
      height: 100%;
      filter: brightness(0.8);
    }

    .avatar-container {
      position: absolute;
      left: 50%;
      bottom: -40px;
      transform: translateX(-50%);

      .avatar {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        border: 3px solid #fff;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      }

      .avatar-edit {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 30px;
        height: 30px;
        background-color: #2A5CAA;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid #fff;
      }
    }
  }

  .profile-card {
    background-color: #fff;
    border-radius: 10px;
    margin: 60px 15px 15px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

    .card-header {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 15px;

      .username {
        font-size: 20px;
        font-weight: bold;
        color: #333;
      }

      .level-badge {
        display: flex;
        align-items: center;
        background-color: #f0f0f0;
        border-radius: 12px;
        padding: 2px 8px;
        margin-left: 10px;
        font-size: 12px;

        .uni-icons {
          margin-left: 3px;
        }
      }
    }

    .stats-row {
      display: flex;
      justify-content: space-around;
      margin: 20px 0;

      .stat-item {
        display: flex;
        flex-direction: column;
        align-items: center;

        .stat-value {
          font-size: 18px;
          font-weight: bold;
          color: #333;
        }

        .stat-label {
          font-size: 12px;
          color: #666;
          margin-top: 5px;
        }
      }
    }

    .bio {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px;
      background-color: #f9f9f9;
      border-radius: 6px;
      font-size: 14px;
      color: #666;

      .uni-icons {
        margin-left: 10px;
      }
    }
  }

  .info-form {
    background-color: #fff;
    border-radius: 10px;
    margin: 15px;
    padding: 0 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

    .form-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 0;
      border-bottom: 1px solid #f0f0f0;

      &:last-child {
        border-bottom: none;
      }

      .label {
        font-size: 15px;
        color: #333;
      }

      .value {
        display: flex;
        align-items: center;

        text {
          font-size: 14px;
          color: #666;
          margin-right: 5px;
        }
      }
    }
  }

  .settings-section {
    background-color: #fff;
    border-radius: 10px;
    margin: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

    .section-title {
      padding: 15px;
      font-size: 14px;
      color: #999;
      border-bottom: 1px solid #f0f0f0;
    }

    .setting-item {
      display: flex;
      align-items: center;
      padding: 12px 15px;
      border-bottom: 1px solid #f0f0f0;

      &:last-child {
        border-bottom: none;
      }

      .uni-icons:first-child {
        margin-right: 10px;
      }

      text {
        flex: 1;
        font-size: 15px;
        color: #333;
      }

      .cache-size {
        font-size: 13px;
        color: #999;
        margin-right: 5px;
      }
    }
  }

  .logout-btn {
    margin: 20px 15px 0;
    background-color: #fff;
    border-radius: 8px;
    padding: 12px;
    text-align: center;
    font-size: 16px;
    color: #FF6B6B;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }

  .edit-popup {
    background-color: #fff;
    border-radius: 12px 12px 0 0;
    padding: 15px;

    .popup-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;

      .title {
        font-size: 16px;
        font-weight: bold;
        color: #333;
      }

      .cancel {
        font-size: 14px;
        color: #666;
      }
    }

    .popup-content {
      margin-bottom: 20px;

      textarea,
      input {
        width: 100%;
        height: 100px;
        padding: 10px;
        border: 1px solid #eee;
        border-radius: 6px;
        font-size: 14px;
        margin-bottom: 10px;
      }

      input {
        height: auto;
        padding: 12px 10px;
      }

      .word-count {
        display: block;
        text-align: right;
        font-size: 12px;
        color: #999;
      }

      .radio-item {
        display: flex;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid #f5f5f5;

        radio {
          transform: scale(0.8);
          margin-right: 10px;
        }

        text {
          font-size: 15px;
          color: #333;
        }
      }

      .picker {
        padding: 12px 0;
        font-size: 15px;
        color: #333;
      }
    }

    .confirm-btn {
      background-color: #2A5CAA;
      color: #fff;
      border-radius: 6px;
      font-size: 16px;
    }
  }
</style>
